<!--
 * @Description: 事件
 * @Author: rendc
 * @Date: 2025-11-05 10:22:03
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-05 15:30:12
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件</title>
  <script>
    window.onload = function () {
      // console.log('onload');
      // var app = document.getElementById("app");
      // console.log('🤡 CC - app:', app);
    }
    window.onresize = function(){
      // 窗口大小发生变化时触发
      // console.log('🤡 CC - onresize:');
      // console.log('🤡 CC - window.outerHeight:', window.outerHeight);
      // console.log('🤡 CC - window.outerWidth:', window.outerWidth);
      // console.log('🤡 CC - window.innerHeight:', window.innerHeight);
      // console.log('🤡 CC - window.innerWidth:', window.innerWidth);
    }
  </script>
</head>
<body>
  <!-- <div id="app" onmousedown="appMousedown(event)"> -->
  <div id="app">
    <!-- 文本被选中的事件 -->
    <br>
    用户名：<input id="userName" type="text" onblur="inputBlur()" onselect="inputSelect(event)">
    <br>
    <br>
    <textarea id="textarea1"></textarea>
    <br>
    <br>
    <hr>
    按键测试：<input id="num" type="text" >
    <div id="noCopy">这段文字禁止复制</div>
  </div>
  <script>
    // 获取事件源
    // var noCopyDiv = document.getElementById("noCopy");
    // 绑定事件 到 document 上
    document.onkeydown = function(event){
      // console.log('🤡 CC - event:', event);
      // 监听按键c
      // 监听按键 ctrl+c
      if ((event.key == "c" || event.key == "C") && event.ctrlKey){
          alert('请开通会员');
          // 阻止复制 
          event.preventDefault();
        }
      }
      // key == 'c' && e.ctrlKey
      // alert

    // 按键测试的事件 
    // var numInput = document.getElementById('num');
    // // 绑定事件
    // numInput.onkeydown = function(event){
    //   console.log('🤡 CC - onkeydown - event:', event);
    //   console.log('🤡 CC - onkeydown - event.key:', event.key);
    //   console.log('🤡 CC - onkeydown - event.keyCode:', event.keyCode);
    // }
    // 绑定事件
    // numInput.onkeypress = function(event){
    //   // console.log('🤡 CC - onkeydown - event:', event);
    //   console.log('🤡 CC - onkeypress - event.key:', event.key);
    //   console.log('🤡 CC - onkeypress - event.keyCode:', event.keyCode);
    // }
    // numInput.onkeyup = function(event){
    //   // console.log('🤡 CC - onkeydown - event:', event);
    //   console.log('🤡 CC - onkeyup - event.key:', event.key);
    //   console.log('🤡 CC - onkeyup - event.keyCode:', event.keyCode);
    // }

    // numInput.addEventListener('textInput',function(event){
    //   console.log('🤡 CC - ontextInput - event.data:', event.data);
    // })
    
    // 鼠标事件
    // function appMousedown(event){
      // console.log('🤡 CC - appMousedown - event:', event);
    // }
    // Html事件绑定方式
    function inputSelect(event){
      console.log('🤡 CC - inputSelect - event:', event);
      // 获取选中的文本
      console.log('🤡 CC - inputSelect - window.getSelection().toString():', window.getSelection().toString());
    }
    // DOM0事件绑定方式
    // 1. 获取事件源
    var textarea1 = document.getElementById("textarea1");
    // 2. 绑定事件处理程序
    textarea1.onselect = function (event) {
      console.log('🤡 CC - event:', event);
    }
    // inputBlur
    function inputBlur(){
      // console.log('🤡 CC - inputBlur - input 失去焦点 - 表单校验');
      // 找到输入框 
      // 方式1 id userName
      // 方式2 
      // event.target
      // console.log('🤡 CC - inputBlur - event.target:', event.target.value);
      // 获取输入框中的文本
      var text = event.target.value;
      // 验证非空
      if (text == '') {
        console.log('🤡 CC - inputBlur - 空的:');
        // 请输入用户名
        var spanTag = document.createElement("span");
        spanTag.innerHTML = "请输入用户名";
        event.target.after(spanTag);
      }else{

      }

    }
  </script>
</body>
</html>